<template>
    <div id="qrCodeIndex">
               <ul class="tabList">
                    <li v-for="(item,index) in itemList" :key="index" :class="{active:index == $store.state.activeIndex}" @click="tabLiChange(index,item)">
                        {{item.title}}
                    </li>
                </ul>
                <div class="templateMain">
                    <component :is="tempType" :title="tempTitle"></component>
                </div>
    </div>
</template>

<script>
    import setQrcode from '@/components/qrCodeMain/setQrCode'
    import qrcodeList from '@/components/qrCodeMain/qrCodeList'
    import downloadQrcode from '@/components/qrCodeMain/downloadQrCode'
    export default {
        components:{setQrcode,qrcodeList,downloadQrcode},
           data(){
               return {
                   activeIndex:0,
                   tempType:'set-Qrcode',
                   tempTitle:'设置二维码打印样式',
                   itemList:[
                       {title:'打印模版设置',pageTitle:'打印模版设置',component:'set-Qrcode'},
                       {title:'按资产分类下载',pageTitle:'按资产分类下载',component:'download-Qrcode'},
                       {title:'单个二维码下载',component:'qrcode-List'},
                    //    {title:'打印设备',component:'qrcode-List'}
                   ]
               }
           },
           methods:{
               tabLiChange(index,item){
                   this.activeIndex = index
                   this.tempType = item.component
                   this.tempTitle = item.pageTitle
                   this.$store.commit('setactiveIndex',index)
               }
           }
    }
</script>

<style lang="scss" scoped>
#qrCodeIndex{
    background-color: #fff;
    border: 1px solid rgba(224, 227, 234, 1);
    .tabList{
        list-style-type:none;
        width:100%;
        height:50px;
        background-color:rgba(243, 246, 249, 1);
        border-radius:5px 5px 0px 0px;
        border-bottom:1px solid rgba(224, 227, 234, 1);
        display:flex;
        li{
           width:130px;
           height:50px;
           line-height:50px;
           text-align:center;
           font-size:14px;
           color:#606266;
           font-weight:600;
           cursor:pointer;
           border-right:1px solid rgba(224, 227, 234, 1);
           position:relative;
           &:last-child{
             border-left:none !important;
             border-radius:5px 5px 0px 0px;
           }
           &:first-child{
             border-right:1px solid rgba(224, 227, 234, 1);
             border-radius:5px 5px 0px 0px;
           }
        }
        .active{
           color:rgba(56, 148, 255, 1);
           background-color:#fff;
           border-radius:5px 5px 0px 0px;
           padding-bottom:1px;
           border-right:1px solid rgba(224, 227, 234, 1);
        }
    }
    .templateMain{
       padding: 20px 20px 40px;
    }
}

</style>